<template>
    <div>
     <el-row>
      <el-col :span="10">
        <el-button type="primary" size="small" icon="el-icon-caret-left" @click="prev">上一页</el-button>
      </el-col>
      <el-col
        :span="4"
        style="font-family:Serif;font-size:40px;font-weight:bold;text-align:center"
      >{{reviewInfo.title}}</el-col>
    </el-row>
    <el-row style="margin-top:20px">
      <el-col :span="12" :offset="6">
        <el-card v-if="this.reviewInfo.row.FILETYPE !='chat'">
          <div id="videoDiv"></div>
        </el-card>
      </el-col>
      </el-row>
    <el-row :gutter="10" style="margin-top:60px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-col :span="6" :offset="6">
          <el-form-item label="案例编号" prop="CASENO">
            <el-input size="small" placeholder="请输入案例编号" disabled v-model="ruleForm.CASENO"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="案例名称" prop="CASENAME">
            <el-input size="small" placeholder="请输入案例名称" disabled v-model="ruleForm.CASENAME"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-form-item label="文件类型" prop="FILETYPE">
            <el-input size="small" placeholder="请输入文件类型" disabled v-model="ruleForm.FILETYPE"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="文件名" prop="FILENAME">
            <el-input size="small" placeholder="请输入文件名" disabled v-model="ruleForm.FILENAME"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-form-item label="操作方式" prop="OPERAFLAG">
            <el-radio-group v-model="ruleForm.OPERAFLAG" size="small">
              <el-radio label="0" border>通过</el-radio>
              <el-radio label="2" border>不通过</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="this.ruleForm.OPERAFLAG == '2'">
          <el-form-item label="删除原因" prop="DELDESC">
            <el-input v-model="ruleForm.DELDESC" type="textarea" placeholder="请输入删除原因" :rows="4"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" :offset="6">
          <el-form-item>
            <el-button type="primary" size="small" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    </div>
</template>

<script>
import request from "@/common/utils/requestQC";
import getGlobalParams from "@/common/utils/getGlobalParams";
import reviewData from "@/message/QCManage/caseManage/caseReview";
import toolBox from "@/common/utils/toolBox";

export default {
  props: {
    option: Object
  },
  computed: {
    isShow: {
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  mounted() {},
  data() {
    return {
      reviewInfo: {},
      video_start: 0,
      video_stop: 0,
      videojs: null,
      disabledtime: [],
      recordTimeArr: [],
      videoTimeIndex: 0,
      ruleForm: {
        CASENO: "",
        CASENAME: "",
        FILETYPE: "",
        FILENAME: "",
        OPERAFLAG: "",
        DELDESC: "",
        CASESTATUS:"",
        loading: false
      },
      rules: {
        OPERAFLAG: [
          {
            required: true,
            message: "请选择操作方式",
            trigger: "change"
          }
        ],
        DELDESC: [
          {
            required: true,
            message: "请输入删除原因",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.getParams();
  },
  methods: {
    // 返回上一页
    prev() {
      console.log("返回上一页");
      this.$router.go(-1);
    },
    // 接受上一页 table传参，后初始化canvas;
    getParams() {
      // console.log("this.$route.params,", this.$route.params);
      this.reviewInfo = this.$route.params;
      this.ruleForm.CASENO = this.reviewInfo.row.CASENO;
      this.ruleForm.CASENAME = this.reviewInfo.row.CASENAME;
      this.ruleForm.FILETYPE = this.reviewInfo.row.FILETYPE;
      this.ruleForm.FILENAME = this.reviewInfo.row.FILENAME;
      this.openDialog();
    },
    // 指定视频播放开始结束时间
    changestart(time) {
      // console.log(this.videojs.currentTime());
      this.video_start = time;
      this.videojs.currentTime(this.video_start);
    },
    addpoint(data) {
      // console.log(this.videojs.markers, typeof this.videojs.markers, "1111");
      if (typeof this.videojs.markers === "function") {
        this.videojs.markers();
        this.videojs.markers.add(data);
        this.videojs.markers.updateTime();
        // console.log(
        //   this.videojs.markers.getMarkers(),
        //   this.videojs.markers,
        //   "marker"
        // );
        var markers = this.videojs.markers.getMarkers();
        for (var i = 0; i < markers.length; i++) {
          if (!markers[i].disabled && i < markers.length - 1) {
            this.disabledtime.push({
              time: [markers[i].time, markers[i + 1].time],
              message: markers[i].message
            });
          } else if (!markers[i].disabled && i == markers.length - 1) {
            this.disabledtime.push({
              time: [markers[i].time, this.video_stop],
              message: markers[i].message
            });
          }
        }
        // console.log(this.disabledtime, "gggg");
      }
    },
    // 开启仅能播放的时间段
    setDisabledTime(timeArr) {
      for (var i = 0; i < timeArr.length; i++) {
        if (
          this.videojs.currentTime() >= timeArr[i].time[0] &&
          this.videojs.currentTime() <= timeArr[i].time[1]
        ) {
          this.videojs.pause();
          if (this.recordTimeArr.indexOf(this.videojs.currentTime()) == 0) {
            this.changestart(this.recordTimeArr[1]);
          } else {
            this.changestart(this.recordTimeArr[0]);
          }
          this.$message({
            type: "warning",
            message: timeArr[i].message
          });
        }
      }
    },
    openDialog() {
      if(this.reviewInfo.row.FILETYPE == 'video' ||this.reviewInfo.row.FILETYPE == 'voice'){
        var url = getGlobalParams.get("FileDownloadAddress")+'/share/' +this.reviewInfo.row.FILEPATH +'/'+ this.reviewInfo.row.FILENAME;
        console.log('url',url)
        var type = "video/mp4";
        // var url = 'rtmp://58.200.131.2:1935/livetv/hunantv';
        // var type = 'rtmp/flv';
        var that = this;
        var videoElement = document.createElement("video");
        videoElement.id = "videoWindow";
        videoElement.style = "width:100%;" + "height:350px";
        videoElement.className = "video-js vjs-default-skin";
        videoElement.controls = true;
        videoElement.autoplay = true;
        var videoSource = document.createElement("source");
        videoSource.src = url;
        videoSource.type = type;
        videoElement.append(videoSource);
        this.$nextTick(() => {
          document.getElementById("videoDiv").append(videoElement);
          // console.log(
          //   this.$refs,
          //   document.getElementById("videoWindow"),
          //   "lllll"
          // );
          this.videojs = videojs(
            document.getElementById("videoWindow"),
            {
              controls: true,
              // width: 500,
              // height: 300,
              preload: "auto",
              autoplay: true,
              sources: [
                //播放的源
                {
                  src: url,
                  type: type
                }
              ]
            },
            function() {
              // console.log("video is ready");
              this.on("loadstart", function() {
                // console.log("loadstart");
              });
              this.on("loadedmetadata", function() {
                // console.log("data has been loade---:", this);
                that.video_start = 0;
                that.video_stop = this.duration();
                var data = [
                  {
                    time: 9,
                    text: "标签1",
                    disabled: true
                  },
                  {
                    time: 40,
                    text: "标签2",
                    disabled: false,
                    message: "标签2不可查看"
                  },
                  {
                    time: 70,
                    text: "标签3",
                    disabled: true
                  },
                  {
                    time: 100,
                    text: "标签4",
                    disabled: false,
                    message: "标签4不可查看"
                  }
                ];
                that.addpoint(data);
              });
              this.on("timeupdate", function() {
                // console.log(this.currentTime());
                if (this.currentTime() >= that.video_stop) {
                  this.pause();
                }
  
                if (
                  that.videoTimeIndex == 0 &&
                  this.currentTime() !== that.recordTimeArr[1]
                ) {
                  that.recordTimeArr[that.videoTimeIndex] = this.currentTime();
                  that.videoTimeIndex = 1;
                } else if (
                  that.videoTimeIndex == 1 &&
                  this.currentTime() !== that.recordTimeArr[0]
                ) {
                  that.recordTimeArr[that.videoTimeIndex] = this.currentTime();
                  that.videoTimeIndex = 0;
                }
  
                that.setDisabledTime(that.disabledtime);
              });
            }
          );
        });
      }
      this.$forceUpdate();
    },
    //保存
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let resBody;
          resBody = new reviewData();
          resBody.data.CASENO = this.ruleForm.CASENO;
          resBody.data.OPERAFLAG = this.ruleForm.OPERAFLAG;
          resBody.data.CASESTATUS = this.ruleForm.OPERAFLAG;
          resBody.data.DELDESC = this.ruleForm.DELDESC;
          let response = await request(resBody);
          if (response.SYS_HEAD.ReturnCode == "000000") {
            this.$message({
              type: "success",
              message: "审核成功！"
            });
          this.$router.go(-1);
          } else {
            this.$message({
              type: "error",
              message:
                "请求失败，错误码:" +
                response.SYS_HEAD.ReturnCode +
                "，错误信息：" +
                response.SYS_HEAD.ReturnMessage
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].clearValidate();
        this.$refs[formName].resetFields();
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>